<template>
  <div class="login-container">
    <div class="container">
      <h3 class="login-header">{{ title }}</h3>
      <div class="login-box">
        <div class="logo-bg"></div>
        <div :class="['min-version', 'login-ops']">
          <div class="login-ops-inner">
            <div v-loading="loading" :class="['ops-right']">
              <sec-tabs v-model="activeName">
                <sec-tab-pane
                  v-for="item in metaData"
                  :key="item.tabKey"
                  :label="item.tabName"
                  :name="item.tabKey"
                >
                  <render-factory
                    :options="item"
                    :app-code="appCode"
                    :domain="domain"
                    :terminal-id="terminalId"
                  />
                </sec-tab-pane>
              </sec-tabs>
            </div>
          </div>
        </div>
        <!-- 绑定手机号 -->
        <association-phone
          v-if="showBindDialog"
          :union-id="unionId"
          :open-id="openId"
        />
        <p class="copyright">
          备案号:京ICP备19019781号-2 Copyright ©2022 天翼安全科技有限公司
          版权所有
        </p>
      </div>
    </div>
  </div>
</template>
<script>
import '@/styles/login.scss'
import { mapState } from 'vuex'
import http from '@/utils/http'
import RenderFactory from './components/RenderFactory.vue'
import AssociationPhone from './components/AssociationPhone.vue'
import {
  loginTypesTpl,
  plc,
  domain,
  terminalId,
  appCode
} from './configuration'

export default {
  name: 'Login',
  components: {
    RenderFactory,
    AssociationPhone
  },
  data() {
    return {
      activeName: '',
      // 登录配置
      domain: domain,
      // 登录配置
      terminalId: terminalId,
      // 登录配置
      appCode: appCode,
      // -------------------------- 私有属性 ------------------------
      // pullconfig配置项元数据
      metaData: [],
      // 绑定手机号弹框
      showBindDialog: false,

      loading: true,
      // 回传
      openId: '',
      unionId: ''
    }
  },
  computed: {
    ...mapState({
      title: (state) => state.settings.title
    })
  },
  created: function () {
    this.pullConfig()
  },
  methods: {
    /**
     * @description 需要绑定手机号
     * @param {*} value 是否弹出绑定弹框
     * @param {*} unionId 微信unionId
     * @param {*} openId 微信openId
     */
    willbind(value, unionId, openId) {
      this.openId = openId
      this.unionId = unionId
      this.showBindDialog = value
    },
    handleClose() {
      this.showBindDialog = !this.showBindDialog
    },

    /**
     * @description 拉取登录配置项
     */
    async pullConfig() {
      const { code, data } = await http.getLoginType({ appCode: this.appCode })

      this.loading = false

      if (code !== '200') {
        console.error('获取登录信息失败！！')
        return
      }

      this.metaData = data
        .map((item) => ({
          tabName: loginTypesTpl[item.loginTab][0],
          tabKey: loginTypesTpl[item.loginTab][1],
          loginTab: item.loginTab,
          placeholder: item.loginConfig.loginTypes
            .map((txt) => plc[txt])
            .join('/'),
          ...item
        }))
        .map(({ tabKey, tabName, placeholder, loginConfig, loginTab }) => {
          const { authCode, loginTypes, verifyCode } = loginConfig
          const { authCode: smsAuthCode, verifyTypeList, enable } = verifyCode

          const pwdInput =
            tabKey === 'account' || smsAuthCode.indexOf('PASSWORD') !== -1
              ? ['PASSWORD']
              : []

          // 短信验证
          const smsVerify = { enable, verifyTypeList }

          // 登录字段
          const inputField = [
            ...authCode,
            ...loginTypes,
            ...pwdInput,
            ...smsAuthCode
          ]

          return {
            inputField,
            smsVerify,
            loginTab,
            placeholder,
            tabKey,
            tabName
          }
        })
      if (this.metaData && this.metaData.length) {
        this.activeName = this.metaData[0].tabKey
      }
    }
  }
}
</script>
<style scoped lang="scss">
.login-container {
  min-width: 1200px;
  // min-height: 730px;
}

.container {
  display: flex;
  height: 100%;
  width: 100%;
  background-image: url('../../assets/images/login_bg.png');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  position: relative;

  .login-box {
    position: relative;
    width: 1200px;
    margin: 0 auto;
    left: -80px;
  }

  .login-header {
    position: absolute;
    padding-left: 395px;
    font-size: 24px;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    color: #262626;
    line-height: 42px;
    background-image: url('../../assets/images/logo@2x.png');
    background-size: contain;
    background-repeat: no-repeat;
    height: 42px;
    z-index: 91;
    margin: 0;
    background-position: 36px 0;
    margin-top: 50px;
    /*   */
    -webkit-touch-callout: none;
    /*系统默认菜单被禁用*/
    -webkit-user-select: none;
    /*webkit浏览器*/
    -khtml-user-select: none;
    /*早期浏览器*/
    -moz-user-select: none;
    /*火狐*/
    -ms-user-select: none;
    /*IE10*/
    user-select: none;
    -webkit-user-select: none;
  }

  .logo-bg {
    width: 818px;
    height: 564px;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 89;
    background-image: url('../../assets/images/logo_blue.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
  }

  .login-ops {
    max-width: 695px;
    max-height: 450px;
    height: 100%;
    width: 100%;
    background: #ffffff;
    box-shadow: 0px 0px 15px 0px #e8eaf1;
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    overflow: auto;
    z-index: 99;

    .login-ops-inner {
      width: 695px;
      height: 450px;
      display: flex;
      /*   */
      -webkit-touch-callout: none;
      /*系统默认菜单被禁用*/
      -webkit-user-select: none;
      /*webkit浏览器*/
      -khtml-user-select: none;
      /*早期浏览器*/
      -moz-user-select: none;
      /*火狐*/
      -ms-user-select: none;
      /*IE10*/
      user-select: none;
      -webkit-user-select: none;

      .ops-right {
        // width: 369px;
        position: relative;
        flex: 1;
        padding: 36px 44px 0 44px;

        .line {
          height: 60px;
          border-bottom: 1px solid #dcdcdc;
          display: flex;
          align-items: flex-end;
        }

        .line-tips {
          padding: 16px 0;

          & > span {
            font-size: 14px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #262626;

            & > a {
              color: #3366ff;
            }
          }
        }
      }
    }
  }

  .login-ops.min-version {
    padding: 0 10px;
    max-width: 389px;

    .login-ops-inner {
      width: 369px;
    }
  }

  .copyright {
    position: absolute;
    bottom: 66px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 14px;
    color: #80868c;
    z-index: 90;
  }

  .signup {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 50px;
    line-height: 50px;
    font-size: 14px;
    text-align: center;
    border-radius: 0px 0px 4px 4px;
    color: #8c8c8c;
    display: flex;
    justify-content: space-around;

    span {
      color: #3366ff;
      cursor: pointer;
    }

    .forget {
      cursor: pointer;
      color: #3366ff;
    }
  }
}
</style>
